<template>
  <div ww3 auto>
    <div class="sale-type" flex flex-b flex-c>
      <div class="sale-type-r" fz-14 grey>
        <span> 充值余额: 0元 </span>
        <span>销售收入: 1419元</span>
      </div>
    </div>

    <el-card class="box-card">
      <!--      <dl flex flex-b flex-c fz-16>
        <dt
            cur
        >
            金额
        </dt>
        <dd flex flex-b flex-c>
          <span>作品</span>
          <span>作品</span>
          <span>

          </span>
        </dd>
      </dl>-->

      <dl flex flex-b flex-c fz-16 v-for="(item,index) in list" :key="index">
        <dt cur ellipsis>{{item.total}}元</dt>
        <dd flex flex-b flex-c>
          <span class="link-detail" @click="goDetail(item.videoId)">作品：{{item.serialNumber}}</span>
          <span>{{item.incomeType == 1 ? '收益': '支出'}}</span>
          {{item.createTime}}
        </dd>
      </dl>
      <dl v-if="list.length == 0" style="text-align: center;">
        暂无数据
      </dl>
    </el-card>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import $http from "@/api/info/info"
export default {
  name: "Feedback",

  data() {
    return {
      radio: "1",
      pageSize: 10,
      pageNum: 1,
      total: 0,
      list: []
    };
  },
  mounted() {
    this.incomeLogPage();
  },
  methods: {
    /**
     * 分页
     */
    currentChange(val) {
      this.pageNum = val;
      this.incomeLogPage();
    },
    /**
     * 收支列表
     */
    incomeLogPage() {
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      $http.incomeLogPage(data).then(res => {
        console.log("收支列表",res);
        this.total = res.total;
        this.list = res.rows;
      })
    },
    goDetail(id) {
      this.$router.push("/videoCenter/watch/"+ id);
    },
    close() {
      this.form.radio = "";
    },
    handle() {
      this.$router.push({
        name: "ChatView",
        params: {
          id: 78990,
        },
      });
    },
  },
};
</script>

<style scoped>
.link-detail{
  cursor: pointer;
}
.link-detail:hover{
  color: var(--green);
}
.box-card {
  margin: 2% auto;
  min-height: 60vh;
}
.box-card a,
.box-card dl {
  color: #303133;
}
.box-card dl {
  width: 70%;
  margin: 0 auto;
  height: 48px;
  border-bottom: 1px solid #ebeef5;

  padding: 3% 1%;
}

.box-card dl:hover {
  background: #f6f9fc;
}
.box-card dl:hover dd a {
  color: #44a0d5;
}

.box-card dt {
  flex: 1;
}
.box-card dd {
  flex: 0 0 70%;
}

.sale-type-r span {
  margin-right: 10px;
}
</style>
